<template>
  <div class="account_box">
    <div class="account_box_text1">{{ $t("user.Account") }}</div>
    <div class="account_box_text2"></div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.UID") }}</div>
      <div class="account_box_text3_child2">{{ dataList.id }}</div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.Nickname") }}</div>
      <div class="account_box_text3_child2">{{ dataList.user_code }}</div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.Password") }}</div>
      <div class="account_box_text3_child2">{{ "*****" }}</div>
      <div class="account_box_text3_child3 cursor" @click="changePossad">
        {{ $t("user.change") }}
      </div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">
        {{ $t("user.Name") }}{{ dataList.user_name }}
      </div>
      <div
        class="account_box_text3_child3 cursor"
        @click="dialogVisible1 = true"
      >
        {{ $t("user.change") }}
      </div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">
        {{ $t("user.Email") }}{{ dataList.email }}
      </div>
      <!-- <div class="account_box_text3_child4" style="margin-left: 10px">
        {{ $t("user.net") }}
      </div> -->
    </div>
    <div class="account_box_text4">{{ $t("user.linked") }}</div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.SMS") }}</div>
      <div class="account_box_text3_child2">
        {{ dataList.phone }}
      </div>
    </div>
    <div class="account_box_text4">{{ $t("user.For") }}</div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.USDT") }}</div>
      <div class="account_box_text3_child5">
        <span v-if="false"> {{ $t("user.Registers1") }}</span>
        <span>{{ dataList.ustd_address }}</span>
      </div>
      <div
        class="account_box_text3_child6 cursor"
        :style="{
          background: dataList.ustd_address == '' ? '#00b0f0' : '#ccc',
        }"
        @click="ustd_addressFn"
      >
        {{ $t("user.Register") }}
      </div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.Network") }}</div>
      <div class="account_box_text3_child5">
        <span v-if="false"> {{ $t("user.Enters") }}</span>
        <span>{{ dataList.omc_address }}</span>
      </div>
      <div
        class="account_box_text3_child6 cursor"
        :style="{
          background: dataList.omc_address == '' ? '#00b0f0' : '#ccc',
        }"
        @click="omc_addressFn"
      >
        {{ $t("user.Register") }}
      </div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.ProductS") }}</div>
      <div
        class="account_box_text3_child6 cursor"
        :style="{
          background:
            dataList.country == '' &&
            dataList.country_code == '' &&
            dataList.postal_code == '' &&
            dataList.product_address_one == ''
              ? '#00b0f0'
              : '#ccc',
        }"
        @click="ProductSFn"
      >
        {{ $t("user.Register") }}
      </div>
    </div>
    <div class="account_box_text4" style="color: #000">
      {{ $t("user.Please") }}
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.Referral") }}</div>
      <div class="account_box_text3_child2" style="color: #ed7d31">
        {{ dataList.referral_id }}
      </div>
      <div
        class="account_box_text4"
        style="color: #ed7d31; display: inline-block; margin-left: 10px"
      >
        {{ $t("user.must") }}
      </div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.Registration") }}</div>
      <div class="account_box_text3_child5">{{ dataList.voucher_code }}</div>
    </div>
    <div class="account_box_text3">
      <div class="account_box_text3_child1">{{ $t("user.SIGNUP") }}</div>
      <div class="account_box_text3_child2">{{ dataList.date }}</div>
    </div>
    <!-- 修改姓名 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <div class="dalog1_text1">{{ $t("button.Register") }}</div>
      <el-input
        class="dalog1_text2"
        :placeholder="$t('button.Enter')"
        v-model="updateQuery.user_name"
      ></el-input>
      <div class="dialog_button">
        <el-button
          class="dialog_buttons cursor"
          style="display: inline-block"
          @click="button1"
          >{{ $t("button.Registerso") }}</el-button
        >
        <span style="display: inline-block" class="dialog_span">{{
          $t("button.Registered")
        }}</span>
      </div>
    </el-dialog>
    <!-- 修改USDT wallet address -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleCloses1"
    >
      <div class="dalog1_text1">{{ $t("button.wallet") }}</div>
      <div class="dalog1_text1s">{{ $t("button.Address") }}</div>
      <el-input
        class="dalog1_text2"
        :placeholder="$t('button.Address')"
        v-model="updateQuery.ustd_address"
      ></el-input>
      <el-radio-group v-model="radio" class="radios">
        <el-radio :label="3">{{ $t("button.Network") }}</el-radio>
        <el-radio :label="6">{{ $t("button.TRC20sss") }}</el-radio>
      </el-radio-group>
      <div class="dialog_button">
        <el-button
          class="dialog_buttons cursor"
          style="display: inline-block"
          @click="button1"
          >{{ $t("button.Registerso") }}</el-button
        >
        <span style="display: inline-block" class="dialog_span">{{
          $t("button.Registered")
        }}</span>
      </div>
    </el-dialog>
    <!-- 修改Meta mask wallet address -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible3"
      width="30%"
      :before-close="handleCloses2"
    >
      <div class="dalog1_text1">{{ $t("button.address") }}</div>
      <div class="dalog1_text1s">{{ $t("button.OMC") }}</div>
      <el-input
        class="dalog1_text2"
        :placeholder="$t('button.delivery')"
        v-model="updateQuery.omc_address"
      ></el-input>
      <el-radio-group v-model="radio" class="radios">
        <el-radio :label="3">{{ $t("button.Network") }}</el-radio>
        <el-radio :label="6">{{ $t("button.Networkssss") }}</el-radio>
      </el-radio-group>
      <div class="dialog_button">
        <el-button
          class="dialog_buttons cursor"
          style="display: inline-block"
          @click="button1"
          >{{ $t("button.Registerso") }}</el-button
        >
        <span style="display: inline-block" class="dialog_span">{{
          $t("button.Registered")
        }}</span>
      </div>
    </el-dialog>
    <!-- 修改 Product delivery address -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible4"
      width="40%"
      :before-close="handleCloses3"
    >
      <div class="dalog1_text1">{{ $t("button.delivery") }}</div>
      <div class="dalog1_text1s" style="margin-bottom: 20px">
        <span style="display: inline-block">{{ $t("button.Country") }}</span>
        <span class="spanssssss">{{ $t("button.Countrys") }}</span
        ><span style="display: inline-block">{{ $t("button.Postal") }}</span>
      </div>
      <el-select
        clear="inputSixsss cursor"
        class="selectssss"
        v-model="updateQuery.country"
        :placeholder="$t('button.Korea')"
      >
        <el-option
          v-for="(item, index) in countryData"
          :key="index"
          :label="item.CNName"
          :value="item.CNName"
          @click.native="changeFn(item)"
        >
        </el-option>
      </el-select>
      <!-- <el-input
        :placeholder="$t('button.Korea')"
        v-model="updateQuery.country"
      ></el-input> -->
      <!-- <el-input
        style="display: inline-block; width: 131px; height: 53px; margin: 0 8px"
        placeholder="82"
        v-model="updateQuery.country_code"
      ></el-input> -->
      <el-select
        clear="inputSixsss"
        class="selectw"
        v-model="updateQuery.country_code"
        :placeholder="$t('button.Korea')"
      >
        <el-option
          v-for="(item, index) in countryData"
          :key="index"
          :label="item.CNName"
          @click.native="changeFns(item)"
        >
        </el-option>
      </el-select>
      <el-input
        class="inputqw"
        placeholder="05436"
        v-model="updateQuery.postal_code"
      ></el-input>

      <!-- 大框 -->
      <el-input
        class="dalog1_text2 inputss"
        :placeholder="$t('button.addressq')"
        v-model="updateQuery.product_address_one"
      ></el-input>
      <el-input
        class="dalog1_text2 inputss"
        :placeholder="$t('button.addressqs')"
        v-model="updateQuery.product_address_two"
      ></el-input>

      <div class="dialog_button">
        <el-button
          class="dialog_buttons cursor"
          style="display: inline-block"
          @click="button1"
          >{{ $t("button.Registerso") }}</el-button
        >
        <span style="display: inline-block" class="dialog_span">{{
          $t("button.Registered")
        }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import countryData from "./countryData";
import { index, update } from "@/api/login.js"; // 个人信息接口 个人信息修改
export default {
  data() {
    return {
      input: "",
      query: {
        user_id: "",
      },
      radio: "",
      countryData, // 国家数据
      // 个人信息修改参数
      updateQuery: {
        user_id: "", // 账户id
        user_name: "", // 名字
        ustd_address: "", // ustd 地址
        omc_address: "", // omc 地址
        country: "", // 国家
        country_code: "", // 国家code
        postal_code: "", // 邮政编码
        product_address_one: "", // 产品地址1
        product_address_two: "", // 产品地址2
      },
      dialogVisible1: false, // 修改姓名弹窗
      dialogVisible2: false, // 修改地址
      dialogVisible3: false, // 修改omc地址
      dialogVisible4: false, // 修改其他
      dataList: {}, // 数据数组
    };
  },
  watch: {
    dialogVisible1: {
      immediate: true,
      handler(newValue) {
        if (newValue === true) {
          this.updateQuery = {
            user_id: sessionStorage.getItem("id"), // 账户id
            user_name: "", // 名字
            ustd_address: "", // ustd 地址
            omc_address: "", // omc 地址
            country: "", // 国家
            country_code: "", // 国家code
            postal_code: "", // 邮政编码
            product_address_one: "", // 产品地址1
            product_address_two: "", // 产品地址2
          };
        }
      },
    },
    dialogVisible2: {
      immediate: true,
      handler(newValue) {
        if (newValue === true) {
          this.updateQuery = {
            user_id: sessionStorage.getItem("id"), // 账户id
            user_name: "", // 名字
            ustd_address: "", // ustd 地址
            omc_address: "", // omc 地址
            country: "", // 国家
            country_code: "", // 国家code
            postal_code: "", // 邮政编码
            product_address_one: "", // 产品地址1
            product_address_two: "", // 产品地址2
          };
        }
      },
    },
    dialogVisible3: {
      immediate: true,
      handler(newValue) {
        if (newValue === true) {
          this.updateQuery = {
            user_id: sessionStorage.getItem("id"), // 账户id
            user_name: "", // 名字
            ustd_address: "", // ustd 地址
            omc_address: "", // omc 地址
            country: "", // 国家
            country_code: "", // 国家code
            postal_code: "", // 邮政编码
            product_address_one: "", // 产品地址1
            product_address_two: "", // 产品地址2
          };
        }
      },
    },
    dialogVisible4: {
      immediate: true,
      handler(newValue) {
        if (newValue === true) {
          this.updateQuery = {
            user_id: sessionStorage.getItem("id"), // 账户id
            user_name: "", // 名字
            ustd_address: "", // ustd 地址
            omc_address: "", // omc 地址
            country: "", // 国家
            country_code: "", // 国家code
            postal_code: "", // 邮政编码
            product_address_one: "", // 产品地址1
            product_address_two: "", // 产品地址2
          };
        }
      },
    },
  },
  created() {
    this.query.user_id = sessionStorage.getItem("id");
    this.updateQuery.user_id = sessionStorage.getItem("id");
    this.index(this.query);
  },
  methods: {
    // 个人信息
    async index(query) {
      try {
        const data = await index(query);
        this.dataList = data.data;
        sessionStorage.setItem("grade", data.data.grade); // grade
        sessionStorage.setItem("id", data.data.id); // id
        sessionStorage.setItem("withdraw_money", data.data.withdraw_money); // 可提现金额（70%）
        sessionStorage.setItem("ustd_address", data.data.ustd_address); // ustd_address

        sessionStorage.setItem(
          "product_address_one",
          data.data.product_address_one
        ); // 产品地址1

        sessionStorage.setItem(
          "product_address_two",
          data.data.product_address_two
        ); // 产品地址2
        sessionStorage.setItem("omc_address", data.data.omc_address); // omc_address
        sessionStorage.setItem("shopping_money", data.data.shopping_money); // 可购物金额（30%）
        sessionStorage.setItem("user_code", data.data.user_code); // 用户账号
        sessionStorage.setItem("user_name", data.data.user_name); // 用户名字
        sessionStorage.setItem("code", data.data.code); // //国家号码
        sessionStorage.setItem("phone", data.data.phone); // //手机
        sessionStorage.setItem("email", data.data.email); // //email
        sessionStorage.setItem("voucher_code", data.data.voucher_code); // //16位推荐码
        sessionStorage.setItem("type", data.data.type); // //0非会员1会员
        sessionStorage.setItem("grade", data.data.grade); // //用户账号
        sessionStorage.setItem("country", data.data.country); // //国家
      } catch (error) {
        console.log(error);
      }
    },
    ustd_addressFn() {
      if (this.dataList.ustd_address == "") {
        this.dialogVisible2 = true;
      } else {
        this.dialogVisible2 = false;
      }
    },
    omc_addressFn() {
      if (this.dataList.omc_address == "") {
        this.dialogVisible3 = true;
      } else {
        this.dialogVisible3 = false;
      }
    },
    ProductSFn() {
      if (
        this.dataList.code == "" ||
        this.dataList.country_code == "" ||
        this.dataList.postal_code == "" ||
        this.dataList.product_address_one == ""
      ) {
        this.dialogVisible4 = true;
      } else {
        this.dialogVisible4 = false;
      }
    },
    // 国家的
    changeFn(item) {
      console.log(item);
      this.updateQuery.country = item.CNName;
    },
    // 国家的
    changeFns(item) {
      console.log(item);
      this.updateQuery.country_code = item.dialCode;
    },
    // 修改密码跳转到重置密码页
    changePossad() {
      this.$router.push({
        path: "/reset",
      });
    },
    // 修改性名按钮
    button1() {
      this.update(this.updateQuery);
    },
    // 个人信息修改接口
    async update(query) {
      try {
        const data = await update(query);
        if (data.result_code == 200) {
          this.dialogVisible1 = false;
          this.dialogVisible2 = false;
          this.dialogVisible3 = false;
          this.dialogVisible4 = false;
          this.index(this.query);
        } else {
          this.$message({
            type: "error",
            message: data.msg,
          });
        }
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 修改姓名
    handleClose() {
      this.dialogVisible1 = false;
    },
    // 修改地址
    handleCloses1() {
      this.dialogVisible2 = false;
    },
    // 修改omc
    handleCloses2() {
      this.dialogVisible3 = false;
    },
    // 修改其他
    handleCloses3() {
      this.dialogVisible4 = false;
    },
  },
};
</script>

<style scoped>
::v-deep .el-dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
}
.inputSixs {
  border-radius: 10px;
}
::v-deep .el-input {
  height: 100%;
  border: 2px solid #999999;
  border-radius: 6px;
}
::v-deep .el-input__inner {
  width: 100%;
  height: 100%;
  font-size: 20px;
}
::v-deep .el-radio__inner {
  width: 20px !important;
  height: 20px !important;
}
::v-deep .el-radio__label {
  font-size: 20px !important;
}
.radios {
  margin: 20px 0 0 22px;
}
.dalog1_text1 {
  font-size: 36px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
}
.dalog1_text1s {
  margin: 5px 22px;
  height: 18px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  color: #999999;
}
.dalog1_text2 {
  margin: 22px 0 0 18px;
  width: 396px;
  height: 50px;
}
.dialog_button {
  margin: 28px 0 0 15px;
}
.dialog_buttons {
  width: 265px;
  height: 50px;
  background: #00b0f0;
  border-radius: 10px;
  font-size: 25px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.dialog_span {
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  color: #00b0f0;
}
.account_box {
  box-sizing: border-box;
  width: 100%;
  height: 922px;
  background: #ffffff;
}
.account_box_text1 {
  margin: 62px 0 0 132px;
  width: 224px;
  height: 42px;
  font-size: 56px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
}
.account_box_text2 {
  margin: 53px 0 0 0;
  width: 1918px;
  height: 2px;
  background: #bfbfbf;
}
.account_box_text3 {
  overflow: hidden;
  box-sizing: border-box;
  margin: 15px 0 0 135px;
}
.account_box_text3_child1 {
  height: 20px;
  font-size: 27px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
  display: inline-block;
}
.account_box_text3_child2 {
  height: 20px;
  font-size: 20px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
  display: inline-block;
}
.account_box_text3_child3 {
  float: right;
  display: inline-block;
  margin: 0 473px 0 0;
  width: 150px;
  height: 44px;
  background: #f4f3f3;
  border: 2px solid #999999;
  border-radius: 10px;
  font-size: 25px;
  font-family: Arial;
  font-weight: 400;
  text-align: center;
  color: #666666;
  line-height: 44px;
}
.account_box_text3_child4 {
  display: inline-block;
  color: #00b0f0;
  font-size: 25px;
}
.account_box_text4 {
  margin: 10px 0 0 168px;
  width: 778px;
  height: 18px;
  font-size: 18px;
  font-family: Arial;
  font-weight: bold;
  color: #9a9a9a;
  line-height: 18px;
}
.account_box_text3_child5 {
  display: inline-block;
  font-size: 25px;
  color: #9a9a9a;
}
.account_box_text3_child6 {
  float: right;
  display: inline-block;
  margin: 0 473px 0 0;
  display: inline-block;
  width: 150px;
  height: 44px;
  border-radius: 10px;
  font-size: 25px;
  font-family: Arial;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 44px;
}
.spanssssss {
  display: inline-block;
  margin: 0 10px 0 50px;
}
.selectssss {
  display: inline-block;
  width: 131px;
  height: 53px;
  margin-left: 22px;
}
.selectw {
  display: inline-block;
  width: 131px;
  height: 53px;
  margin-left: 5px;
}
.inputqw {
  display: inline-block;
  width: 204px;
  height: 53px;
  margin-left: 5px;
}
.inputss {
  width: 482px;
  height: 53px;
}
</style>